<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>

    <style>
        .cook_content {
            width: 800px;
        }

        .cook_add {
            padding: 10px 50px;
            float: left;
            background: red;
            color: white;
            border: 1px solid black;
        }

        .cook_delete {
            padding: 10px 50px;
            float: left;
            background: dodgerblue;
            color: black;
            border: 1px solid black;
        }

        .cook_count {
            padding: 10px 50px;
            float: left;
        }

        .cook_name {
            padding: 10px 50px;
            float: left;
        }

        .cook_price {
            padding: 10px 50px;
            float: left;
        }
    </style>
</head>

<body>

<div>

    <div>
        <input type="hidden" value="1" class="cook_id">
        <div class="cook_content">
            <div class="cook_name">菜名</div>
            <div class="cook_name">价格</div>
            <div class="cook_name">加</div>
            <div class="cook_name">数量</div>
            <div class="cook_name">减</div>
            <div style="clear: both"></div>
        </div>
    </div>

    <div>
        <input type="hidden" value="1" class="cook_id">
        <div class="cook_content">
            <div class="cook_name">鸡蛋</div>
            <div class="cook_price">10</div>
            <div class="cook_add" onclick="add(this, 1)">+</div>
            <span class="cook_count">0</span>
            <div class="cook_delete" onclick="add(this, -1)">-</div>
            <div style="clear: both"></div>
        </div>
    </div>

    <div>
        <input type="hidden" value="2" class="cook_id">
        <div class="cook_content">
            <div class="cook_name">啤酒</div>
            <div class="cook_price">20</div>
            <div class="cook_add" onclick="add(this, 1)">+</div>
            <span class="cook_count">0</span>
            <div class="cook_delete" onclick="add(this, -1)">-</div>
            <div style="clear: both"></div>
        </div>
    </div>

    <div>
        <input type="hidden" value="3" class="cook_id">
        <div class="cook_content">
            <div class="cook_name">饮料</div>
            <div class="cook_price">30</div>
            <div class="cook_add" onclick="add(this, 1)">+</div>
            <span class="cook_count">0</span>
            <div class="cook_delete" onclick="add(this, -1)">-</div>
            <div style="clear: both"></div>
        </div>
    </div>

    <div>
        <input type="hidden" value="4" class="cook_id">
        <div class="cook_content">
            <div class="cook_name">火腿</div>
            <div class="cook_price">40</div>
            <div class="cook_add" onclick="add(this, 1)">+</div>
            <span class="cook_count">0</span>
            <div class="cook_delete" onclick="add(this, -1)">-</div>
            <div style="clear: both"></div>
        </div>
    </div>

    <div>总金额：<span id="sum">0</span> 元</div>
    <div>
        <button id="submit" type="button" onclick="submit()">提交订单</button>
    </div>
</div>

</body>
<script>
    var obj = {};

    /**
     * 加菜或减菜.
     * @param target 按钮
     * @param num 加1 或者 减一
     */
    function add(target, num) {
        // 获取菜品id
        var cook_id = $(target).parent().parent().children(".cook_id").val();
        // 获取菜名
        var cook_name = $(target).parent().children(".cook_name").text();
        // 获取菜的单价
        var cook_price = $(target).parent().children(".cook_price").text();

        // 当前该菜品的点餐数量
        var cook_count = parseInt($(target).parent().children(".cook_count").text()) + num;
        // 菜品数量必须大于0
        if (cook_count < 0) {
            return;
        }
        // 页面更新数量
        $(target).parent().children(".cook_count").text(cook_count);

        // 如果obj(菜单)中没有此菜,新增一个
        if (obj[cook_id] == null) {
            obj[cook_id] = {
                "name": cook_name,
                "price": cook_price,
                "count": 1
            };
        }
        // 如果菜单中已经有该菜
        else {
            // 如果当前菜品数量为 0，从菜单中移除
            if (cook_count === 0) {
                delete obj[cook_id];
            } else {
                obj[cook_id].count = cook_count;
                obj[cook_id].price = cook_count * cook_price;
            }
        }

        // 计算总金额
        var sum = 0;
        for (var s in obj) {
            sum += parseInt(obj[s].price);
        }
        $("#sum").text(sum);

        // 菜单js对象， 发送到后台
        var requestJson = JSON.stringify(obj);
        console.info(requestJson);
    }

    /**
     * 提交菜单.
     */
    function submit() {
        $.ajax({
            url: "/submit",
            type: "POST",
            data: JSON.stringify(obj),
            contentType: "application/json",
            dataType: "json",
            success: function (resp) {
                console.info(resp);
               alert(resp.success)
            }
        })
    }
</script>

</html>